<template>
	<view>
		<view class="top">
			<view class="">
				<navigator url="/pages/yonghu1/zhuanyexiche/zhuanyexiche">
					<image class="back" src="/static/images/白色左箭头.png" mode=""></image>
				</navigator>
				<view class="title">
					专业洗车
				</view>
			</view>
		</view>
		<view class="body">
			<uni-card class="card" :is-shadow="false">
				<image class="image" src="/static/images/天安门.jpg" mode=""></image>

				<view class="text">
					<view class="title">
						{{this.title}}
					</view>
					<view class="wz">
						<view class="pf">
							<uni-rate class="" size="18" v-model="count" @change="onChange" />
							<view class="xj">
								{{this.count}}星 销量：{{this.xiaoliang}}
							</view>
						</view>
						<view class="">
							营业时间：周一至周五 早上8:00-晚上22:00
						</view>
						<view class="">
							位置：山阳区人民路与解放路交叉口
						</view>
					</view>
				</view>
			</uni-card>

			<uni-card class="fwxm" :is-shadow="false">
				<view class="title">
					服务项目
				</view>
				<uni-section >
					<view class="uni-px-5 uni-pb-5"  >
						<uni-data-checkbox :localdata="fwxm"></uni-data-checkbox>
					</view>
				</uni-section>
				<view class="jg">
					<view class="xj">
						￥ 35.9
					</view>
					<view class="yj">
						￥ 60
					</view>
				</view>
				<view class="xq">
					这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详细介绍
				</view>
			</uni-card>

			<uni-card class="fwpj" :is-shadow="false">
				<view class="title">
					服务评价
				</view>
				<view class="item">
					<view class="">
						<image class="image" src="../../../static/images/jc.png" mode=""></image>
					</view>
					<view class="text">
						<view class="aa">
							<view class="name">
								黄**
							</view>
							<view class="data">
								2022-12-31
							</view>
						</view>
						<uni-rate class="" size="16" v-model="count" />
						<view class="tt">
							洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！！！
						</view>
					</view>
				</view>
				<view class="item">
					<view class="">
						<image class="image" src="../../../static/images/jc.png" mode=""></image>
					</view>
					<view class="text">
						<view class="aa">
							<view class="name">
								黄**
							</view>
							<view class="data">
								2022-12-31
							</view>
						</view>
						<uni-rate class="" size="18" v-model="count" />
						<view class="tt">
							洗的非常干净，几个小伙子很用心，态度也很好，强烈推荐来这家店洗车！！！
						</view>
					</view>
				</view>
			</uni-card>
			
			<view class="dibu">
				<view class="left">
					<image style="width: 15px; height: 15px; margin-top: 16px;" src="/static/images/客服@2x.png" mode=""></image>
					<view class="kefu" @click="show=true">
						联系客服
					</view>
					<u-popup :show="show" @close="close" @open="open" round="15" mode="bottom">
						<view class="relaDoor">
							<view class="doorItem">18642589456</view>
							<view class="doorItem">复制</view>
							<view class="doorItem" @click="show=false">取消拨号</view>
						</view>
					</u-popup>
				</view>
				<navigator url="/pages/yonghu1/order/order" class="xiadan">
					立即下单
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				title: "小王汽车美发店",
				count: "",
				xiaoliang: 556,
				fwxm:[{
					text:"普通洗车",
					value:0
				},{
					text:"精洗",
					value:1
				},{
					text:"内饰精洗",
					value:2
				},{
					text:"其他精洗",
					value:3
				}]
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.doorItem{
		width: 700rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		
	}
	.dibu{
		margin-top: 50px;
		background-color: white;
		display: flex;
		height: 50px;
		justify-content: space-around;
	}
	.dibu .left{
		display: flex;
	}
	.dibu .kefu{
		margin-left: 5px;
		margin-top: 10px;
		height: 30px;
		line-height: 30px;
		font-weight: bold;
		font-size: 12px;
	}
	.dibu .xiadan{
		margin-top: 10px;
		height: 30px;
		width: 100px;
		line-height: 30px;
		background-color: #0662E6;
		color: white;
		font-size: 13px;
		text-align: center;
		border-radius: 20px;
	}
	.fwpj{
		border-radius: 10px;
	}
	.fwpj .item{
		display: flex;
		padding-bottom: 10px;
		padding-top: 10px;
		border-bottom: 1rpx solid rgba(251,251,251,0.5);
	}
	.fwpj .item .name{
		font-size: 15px;
		font-weight: bold;
	}
	.fwpj .item .data{
		font-size: 12px;
		
	}
	.fwpj .item .tt{
		font-size: 12px;
	}
	.fwpj .item .image{
		width: 60px;
		height: 60px;
		border-radius: 30px;
	}
	.fwpj .text{
		margin-left: 15px;
		margin-top: -1px;
	}
	.fwpj .text .aa{
		display: flex;
		justify-content: space-between;
	}
	.fwpj .title {
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 15px;
	}
	
	.fwxm{
		border-radius: 10px;
	}
	.fwxm .xq{
		font-size: 12px;
	}
	.fwxm .jg{
		display: flex;
	}
	.fwxm .yj{
		font-size: 12px;
		margin-left: 10px;
		text-decoration: line-through;
	}
	.fwxm .xj{
		color: #FF6E45;
		font-size: 15px;
		font-weight: bold;
	}
	.fwxm .uni-data-checkbox{
		margin-right: 10px;
	}
	.fwxm .title {
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.uni-px-5 {
		margin-left: -55px;
		margin-top: -25px;
		width: 150%;
		padding-bottom: 10px;
		transform: scale(0.8);
	}


	.top {
		width: 100%;
		padding-bottom: 120px;
		background: url(../../../static/images/组 8.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.top .back {
		position: absolute;
		margin-left: 20px;
		margin-top: 30px;
		width: 15px;
		height: 15px;
		z-index: 2;
	}

	.top .title {
		text-align: center;
		font-size: 18px;
		color: #fff;
		line-height: 44px;
		/* 根据实际需要调整 */
		padding-top: 20px;
	}

	.body {
		margin-top: -120px;
	}

	.ss {
		display: flex;
		margin: 20px;
		background-color: white;
		height: 30px;
		border-radius: 15px;
		line-height: 20px;
	}

	.card {
		border-radius: 10px;
	}

	.text {
		margin-top: 20px;
	}

	.text .title {
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.card .image {
		margin-top: 10px;
		border-radius: 10px;
		width: 306px;
		height: 200px;
	}

	.body .pf {
		display: flex;
	}

	.card .wz {
		font-size: 12px;
	}

	.card .xj {
		margin-left: 5px;
		margin-top: -2px;
	}
</style>